<template>
	<view class="container" selectable>

		<text class="show" selectable>
			<view class="title">
				{{title}}
			</view>
			<view class="content">
				<view v-for="(item,index) in contant" :key="index" class="item">
					<view v-if="item.includes('http')" class="img">
						<image :src="item" mode="aspectFill" @click="previewImage(item)"></image>
					</view>
					<view v-else class="wenzi">
						{{item}}
					</view>
				</view>
			</view>
		</text>
		<view class="foot">
			<view class="shang" @click="tonext(-1)">
				上一章
			</view>
			<view class="mulu" @click="tomulu">
				目录
			</view>
			<view class="xia" @click="tonext(1)">
				下一章
			</view>
			<view class="mulu" @click="xiugai">
				修改
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				novel: '',
				title: '',
				num: null,
				id: '',
				contant: [],
				origin: {},
				imgarr: []

			}
		},
		onLoad: function(options) {
			console.log(options);
			if(options.command == '1')
			{
				let novelData = uni.getStorageSync('tuwen'); // 从本地缓存中取出名为novelData的数据
				console.log(novelData);
				this.origin = novelData;
				this.id = novelData._id;
				this.num = parseInt(novelData.num);
				this.contant = novelData.contentarr;
				this.novel = novelData.novelname;
				this.title = novelData.zhangjienum + ':' + novelData.title;
								
				// 原始数组
				let arr = novelData.contentarr;
				// 使用正则表达式与filter方法提取包含http的数组元素
				let result = arr.filter(item => /http/.test(item));
				this.imgarr = result;
			}
			else if(options.command == '0')
			{
				
				var that = this
				var a = JSON.parse(decodeURIComponent(options.a));
				console.log("展示小说的大概信息：");
				console.log(a); // 输出变量a的JSON数据
				uniCloud.callFunction({
					name: 'get_novel_neirong',
					data: a
				}).then(res => {
					console.log('小说章节图文获取的信息：');
					console.log(res.result.data[0]);
					//将图文信息保存到本地，方便修改调用
					uni.setStorageSync('tuwen', res.result.data[0]);
					that.origin = res.result.data[0];
					that.id = res.result.data[0]._id;
					that.num = parseInt(res.result.data[0].num);
					that.contant = res.result.data[0].contentarr;
					that.novel = res.result.data[0].novelname;
					that.title = res.result.data[0].zhangjienum + ':' + res.result.data[0].title;
				
					// 原始数组
					let arr = res.result.data[0].contentarr;
					// 使用正则表达式与filter方法提取包含http的数组元素
					let result = arr.filter(item => /http/.test(item));
					that.imgarr = result;
					// 输出结果：['http1', '5995http']
				})
			}
			
		},
		methods: {
			previewImage(e) {
				let index = this.imgarr.indexOf(e);
				const urls = this.imgarr;
				uni.previewImage({
					urls,
					current: urls[index]
				})
			},
			tonext(e){
				let num = this.num + e;
				console.log(num);
				let a = {
					num:num.toString(),
					name:this.novel
				}
				console.log(a);
				var that = this;
				uniCloud.callFunction({
					name: 'get_next_novel',
					data: a
				}).then(res => {
					console.log(res.result.data[0]);
					that.origin = res.result.data[0];
					that.id = res.result.data[0]._id;
					that.num = parseInt(res.result.data[0].num);
					that.contant = res.result.data[0].contentarr;
					that.novel = res.result.data[0].novelname;
					that.title = res.result.data[0].zhangjienum + ':' + res.result.data[0].title;
					
					// 原始数组
					let arr = res.result.data[0].contentarr;
					// 使用正则表达式与filter方法提取包含http的数组元素
					let result = arr.filter(item => /http/.test(item));
					that.imgarr = result;
					// 输出结果：['http1', '5995http']
					
				})
			},
			tomulu(){
				let novelData = uni.getStorageSync('novelData'); // 从本地缓存中取出名为novelData的数据
				console.log(novelData);
				uni.navigateTo({
					//url: '/pages/shijianxiangxi/shijianxiangxi',
					url: '/pages/to_novel_xiangqing/to_novel_xiangqing?command=3&a=4'
				});
			},
			xiugai(){
				uni.navigateTo({
					url: '/pages/xiugai_novel/xiugai_novel',
				});
			}
		}
	}
</script>


<style scoped lang="scss">
	.container {
		background-color: palegoldenrod;
		padding-bottom: 300px;
		width: 100%;

		.show {
			display: block;
			padding: 10px;
			width: 100%;
			
			.title {
				margin-top: 20px;
				width: 100%;
				font-size: 23px;
				font-weight: 800;
				text-align: center;
			}

			.content {
				margin: 20px auto;
				line-height: 2;
				width: 95%;
				padding-right: 200px;
				.item {
					margin-top: 10px;
					font-size: 16px;
					letter-spacing: 3px;

					/* 设置字间距为2个像素 */
					.img {
						text-align: center;
					}

					.wenzi {
						text-indent: 2em;
					}
				}
			}
		}
		.foot{
			display: flex;
			justify-content: space-around;
			view{
				
				background-color: #F04E1A ;
				color: #fff;
				padding: 2px 5px;
				border-radius: 3px;
			}
			
		}
	}
</style>
